<template>
  <div class="home-banner">
    <div class="slide">
      <ul class="list">
        <li class="img">
          <RouterLink to="product">
            <img src="../../../assets/images/C语言.png" alt="">
          </RouterLink>
        </li>
        <li class="img">
          <RouterLink to="product">
            <img src="../../../assets/images/Python语言.png" alt="">
          </RouterLink>
        </li>
        <li class="img">
          <RouterLink to="product">
            <img src="../../../assets/images/Go语言.png" alt="">
          </RouterLink>
        </li>
        <li class="img">
          <RouterLink to="product">
            <img src="../../../assets/images/Java语言.png" alt="">
          </RouterLink>
        </li>
      </ul>
      <a href="javascript:0" class="prev">&lt;</a>
      <a href="javascript:0" class="next">&gt;</a>
      <ol class="cicle"></ol>
    </div>
    <div class="box"></div>

  </div>
</template>

<script>
export default {
  name: 'HomeBanner',
  setup(){

  }
}
</script>

<style scoped lang='less'>
.home-banner {
  width: 1000px;
  height: 500px;
  position: absolute;
  left: 250px;
  top: 0;
  z-index: 98;
}
.slide {
  position: relative;
  width: 100%;
  height: 100%;
  border: 4px solid #baf;
  overflow: hidden;
  transition: all .4s;
  .list {
    position: relative;
    float: left;
    width: 400%;
    height: 100%;
    animation: start 10s infinite;
    @keyframes start {
        0% {
          left: 0;
        }

        25% {
          left: -1000px;
        }

        50% {
          left: -2000px;
        }

        75% {
          left: -3000px;
        }

        100% {
          left: 0;
        }
      }
    .img{
      float: left;
      width: 25%;
      height: 100%;
      cursor: pointer;
      img{
        width: 100%;
        height: 100%;
        background-size: contain;
      }
  }
    // .img:nth-child(1) {
    //   background: url("../../../assets/images/C语言.png") no-repeat;
    // }

    // .img:nth-child(2) {
    //   background: url("../../../assets/images/Python语言.png") no-repeat;
    //   background-position: 300px 200px ;
    // }

    // .img:nth-child(3) {
    //   background: url("../../../assets/images/Go语言.png") no-repeat;
    // }

    // .img:nth-child(4) {
    //   background: url("../../../assets/images/Java语言.png") no-repeat;
    // }
  }
  .prev {
    display: none;
    position: absolute;
    left: 0;
    top: 1000px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #999;
    text-align: center;
  }

  .next {
    display: none;
    position: absolute;
    right: 0;
    top: 1000px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #999;
    text-align: center;
  }
  .cicle {
    position: absolute;
    bottom: 30px;
    left: 270px;
    text-align: center;
  }
  .box {
    width: 300px;
    height: 100px;
    background-color: #baf;
    z-index:1000;
  }
}

</style>
